<template>
  <div class="msgRecharge">
    <!-- 短信余量 -->
    <div class="margin">
      <div class="title">
        短信余量：
        <span
          style="color: #0094ff;font-size: 20px;font-weight: 100"
          size="medium"
          type="info"
        >{{msgMargin}}条</span>
      </div>
    </div>
    <!-- 短信充值 -->
    <div class="content">
      <div class="title">短信套餐选择</div>
      <div class="msgChoose">
        <div
          class="msgItem"
          v-for="(item, index) in msgData"
          :key="index"
          :class="current==index ? 'active' : ''"
          @click="handleClick(index,item)"
        >
          <div class="msgIcon">短</div>
          <div class="dec">
            <div>
              <span style="color: red">{{item.sms_mealprice}}</span>元短信包
            </div>
            <div>
              <span style="color: red">{{item.sms_mealnum}}</span>条
              <p style="color: #999">
                均约
                <span style="color: red">{{item.sms_price}}</span>元/条
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="title">选择支付方式</div>
      <div class="msgChoose">
        <div
          class="msgItem"
          v-for="(item, index) in payforType"
          :key="index"
          :class="current1==index ? 'active' : ''"
          @click="handleClick1(index, item)"
        >
          <i
            style="margin-right: 15px"
            class="pay"
            :class="[item.icon,item.class]"
            aria-hidden="true"
          ></i>
          <div class="dec">{{item.type}}</div>
        </div>
      </div>
    </div>
    <!-- 确认充值按钮 -->
    <div class="confirmBtn">
      <div class="totalMoney">
        应付金额：
        <span style="color: red">{{totalMoney}}.00元</span>
      </div>
      <el-button
        style="padding: 8px 35px;margin-left: 50px"
        type="primary"
        @click="handleRecharge"
      >确定</el-button>
    </div>
    <!-- 二维码 -->
    <div class="codeBox" v-show="isShow">
      <div class="codeContent">
        <div class="codeHeader">
          <div class="codeTitle">{{this.modelData.sms_mealpayment}}扫一扫支付</div>
          <span @click="isShow = false" style="cursor: pointer">X</span>
        </div>
        <div class="codeMain">
          <div class="codeWay">
            <i
              style="font-size: 20px;margin-right: 5px"
              :class="[this.modelData.icon,this.modelData.class]"
            ></i>
            {{this.modelData.type}}
          </div>
          <img :src="this.codeImg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"; //注册state
export default {
  data() {
    return {
      current: 0,
      current1: 0,
      // 短信套餐数据
      msgData: [],
      // 支付方式
      payforType: [
        {
          type: "微信支付",
          icon: "iconweixinzhifu",
          class: "weixin",
          sms_mealpayment: "微信"
        },
        {
          type: "支付宝支付",
          icon: "iconzhifubao",
          class: "zhifubao",
          sms_mealpayment: "支付宝"
        }
      ],
      // 支付总代币
      totalMoney: 200,
      // 充值返回所需数据
      modelData: {
        sms_mealname: "200元短信包", // 套餐名
        sms_mealprice: 200, // 套餐价格
        sms_mealnum: 0, // 短信数
        sms_mealpayment: "微信", // 付款方式
        type: "微信支付",
        icon: "iconweixinzhifu",
        class: "weixin"
      },
      // 隐藏二维码
      isShow: false,
      codeImg: "",
      // 身份令牌
      myToken: ""
    };
  },
  computed: {
    // 引入登录代理商名
    ...mapState(["msgMargin"])
  },
  methods: {
    // 选择套餐
    handleClick(index, val) {
      this.current = index;
      this.totalMoney = val.sms_mealprice;
      this.modelData.sms_mealnum = val.sms_mealnum;
      this.modelData.sms_mealprice = val.sms_mealprice;
      this.modelData.sms_mealname = val.sms_mealname;
    },
    // 选择支付方式
    handleClick1(index, val) {
      this.current1 = index;
      this.modelData.sms_mealpayment = val.sms_mealpayment;
      this.modelData.type = val.type;
      this.modelData.icon = val.icon;
      this.modelData.class = val.class;
    },
    // 确认充值
    handleRecharge() {
      var orderTime = 0;
      // 发送充值请求
      this.$api.smsOnlineRecharge(this.modelData, this.myToken).then(res => {
        const { succeed, values, errmsg } = res;
        if (succeed) {
          this.isShow = true;
          this.codeImg = values;
          var isQuery = false;
          var iCount = setInterval(() => {
            if (orderTime <= 600) {
              if (!isQuery) {
                isQuery = true;
                orderTime += 3;
                this.$api.querySmsOrderUnfinished(errmsg).then(res => {
                  isQuery = false;
                  if (res == 3) {
                    this.$message({
                      type: "succeed",
                      message: "支付成功"
                    });
                    clearInterval(iCount);
                    this.$router.push("personalData");
                    this.isShow = false;
                  }
                });
              }
            } else {
              clearInterval(iCount);
              this.$message.error("您的订单已过期失效");
              location.reload();
              this.isShow = false;
            }
          }, 3000);
        } else {
          this.$message.error("请刷新重试");
          this.isShow = false;
        }
      });
    }
  },
  mounted() {
    // 获取令牌
    this.myToken = sessionStorage.getItem("myToken");
    // 获取短信套餐
    this.$api.getSmsPackage(this.myToken).then(res => {
      const { values } = res;
      this.totalMoney = values[0].sms_mealprice;
      this.modelData.sms_mealnum = values[0].sms_mealnum;
      this.msgData = values.map(v => {
        return {
          ...v
        };
      });
    });
  }
};
</script>

<style lang="less" scoped>
.msgRecharge {
  background-color: #fff;
  position: relative;
  padding-bottom: 50px;
  height: 780px;
  .margin {
    padding: 20px;
    .title {
      font-weight: 600;
      margin-bottom: 20px;
    }
  }
  .content {
    padding: 20px;
    .title {
      font-weight: 600;
      margin-bottom: 20px;
    }
    .msgChoose {
      display: flex;
      flex-wrap: wrap;
      .msgItem {
        width: 15%;
        padding: 20px 0;
        border: 1px solid #e4e4e4;
        margin: 15px;
        margin-right: 30px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 2px 2px 12px 0 #ddd;
        &.active {
          border-color: #5973ea;
        }
        .msgIcon {
          font-size: 30px;
          background-color: #5973ea;
          color: #fff;
          width: 40px;
          height: 40px;
          line-height: 40px;
          padding: 5px;
          border-radius: 8px;
          margin-bottom: 5px;
          margin-right: 30px;
        }
        .dec {
          font-size: 14px;
        }
        .pay {
          font-size: 40px;
          &.weixin {
            color: #08ce9b;
          }
          &.zhifubao {
            color: #0099ff;
          }
        }
      }
    }
  }
  .confirmBtn {
    align-items: center;
    position: absolute;
    right: 100px;
    transform: translateX(-50%);
    .totalMoney {
      margin-bottom: 10px;
    }
  }
}
// 二维码框
.codeBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999;
  .codeContent {
    width: 380px;
    height: 380px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .codeHeader {
      height: 42px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f8f8f8;
      padding: 0 15px;
      font-size: 15px;
    }
    .codeMain {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      align-items: center;
      padding-top: 20px;
      .codeWay {
        font-size: 20px;
        .weixin {
          color: #08ce9b;
        }
        .zhifubao {
          color: #0099ff;
        }
      }
      img {
        margin-top: 20px;
        width: 50%;
      }
    }
  }
}
</style>